<template>
    <div>
        <el-input type="text" :placeholder="placeHolder" v-model="inputText" @keyup="whenInput($event)" @focus="getHintsList" @blur="closeHintsBox" ref="inputText"  />
        <p v-if="inputText!=''&&!inputFromSelect" style="color: red">请从系统提示项中选择!</p>
        <div class="hintsbox" v-if="showHintsBox">
            <ul class="hintslist" style="list-style:none;margin:0px;padding:0px;">
                <li style="list-style-type:none;" v-for="(item,index) in hints" ref="hint" class="hint" @click="fillInput(index)" v-cloak>{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        name: "Web_fill_input",

        props:['dataURL','placeHolder','formName','my_id','getName','key_value'],

        model:{
            prop:'my_id',
            event:'item_selected'
        },

        data(){
            //以下数据属于提示框
            return {
                inputText:'',
                timer: null,
                hints: [],
                ids:[],
                showHintsBox: false,
                activeNo: -1,
                inputFromSelect:false,
                //placeHolder:this.placeHolder
            }
        },

        methods: {
            //用户输入的时候
            whenInput($event) {

                //console.log($event);
                var len = this.hints.length;

                //Down键事件
                if ($event.keyCode == 40) {

                    //划到最后一项的时候
                    if (this.activeNo >= len - 1) {
                        console.log("到底了");
                        return;
                    }

                    this.activeNo++;
                    return;
                }

                //Up键事件
                if ($event.keyCode == 38) {

                    if (this.activeNo <= 0) {
                        console.log("到顶了");
                        return;
                    }

                    this.activeNo--;
                    return;
                }

                //按Enter键
                if ($event.keyCode == 13) {
                    this.fillInput(this.activeNo);
                }


                if ($event.keyCode !== 38 && $event.keyCode !== 40 && $event.keyCode !== 13) {
                    this.getHintsList();
                    this.inputFromSelect = false;
                }

            },

            //根据输入的关键词获取候选列表
            getHintsList() {
                console.log("发起查询请求");
                let url = this.dataURL + '?keyword=' + this.inputText
                if(this.key_value!==undefined){
                    url += this.key_value
                }
                //console.log(url)
                let arr = []; //模拟后台返回的数据
                let brr = []
                axios.get(url).then(e => {

                    //此处的article应该改为其他字段，需要后端配合
                    console.log(e.data.data.content)
                    for (let i = 0; i < e.data.data.content.length; i++) {
                        //存放显示的值（一般是名称）
                        if(this.getName===undefined) {
                            arr.push(e.data.data.content[i].name)
                        }else{
                            arr.push(e.data.data.content[i][this.getName])
                        }
                        //存放id（用id提高查询效率）
                        brr.push(e.data.data.content[i].id)
                    }
                })
                this.hints = arr;
                this.ids = brr;
                this.showHintsBox = true;
            },

            //依据hints数组下标值填充输入框
            fillInput(index) {
                //alert(this.hints[index])
                this.inputText = this.hints[index];
                this.$emit('valueChanged',this.inputText,this.ids[index],this.formName,this.inputFromSelect)
                if(this.formName===undefined){
                    this.$emit('item_selected',this.ids[index]);
                }
                this.inputFromSelect = true;
                this.closeHintsBox();
            },

            //关闭候选框
            closeHintsBox() {
                setTimeout(() => {
                    this.showHintsBox = false;
                    this.hints = [];
                    this.ids = []
                    this.activeNo = -1;
                }, 200)
            }
        },

        watch: {
            activeNo(val, oldVal) {
                //给选项上色
                if(val != -1) {
                    //这里可以替换成你想要执行的任意事件
                    for(var i = 0; i < this.hints.length; i++) {
                        this.$refs.hint[i].style.backgroundColor = "#fff";
                    }
                    this.$refs.hint[val].style.backgroundColor = "#DDD8E5";
                }
            },
            inputText(newVal,oldVal){
                this.getHintsList();
                if(newVal===''){
                    this.$emit('valueChanged','','',this.formName,true)
                }
            }
        }
    }
</script>

<style scoped>
    [v-cloak] {
        display: none;
    }

    .hintsbox-mark {
        position: relative;
    }

    .hintsbox-mark input{
        width: 250px;
    }

    .hintsbox {
        border: 1px solid #ddd;
        position: absolute;
        background: white;
        z-index: 9999999;
    }

    .hintslist .hint {
        padding: 4px 2px;
    }

    .hintslist .hint:hover {
        background-color: #DDD8E5;
        cursor: pointer;
    }

    .hintslist .hint.active {
        background-color: #DDD8E5;
    }
</style>